<template>
	<el-dialog :title="form.modelName" v-model="open" width="800px" @open="initOpen" append-to-body :before-close="close"
		@close="close">
		<!-- <p class="dialogTitle">{{form.modelName}}</p> -->
		<el-form ref="economicRef" :model="form" label-width="120px">
			<el-row>
				<el-col :span="12">
					<el-form-item label="模型名称" prop="modelName">
						{{form.modelName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否默认" prop="">
						{{form.isDefault=='0'?'否':'是'}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="地区" prop="">
						{{form.province}} - {{form.city}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="维护人" prop="">
						{{form.createUserName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="维护人单位" prop="">
						{{form.orgName}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider border-style="dashed"></el-divider>
			<el-row>
				<el-col :span="6" class="tab-title">
					建筑物经济损失评估模型
				</el-col>
			</el-row>
			<el-row style="margin-bottom: 20px;">
				<el-col :span="6" :offset="1">
					（1）建筑物结构经济损失
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :offset="6">
					<span style="font-size: 16px;font-weight: bold;font-style: italic;"> E<sub>f</sub> = ∑<sub
							style="position: absolute;top: 20px;margin-left: -6px;">s</sub> ∑<sub
							style="position: absolute;top: 20px;margin-left: -6px;">j</sub>
						(S<sub>s</sub><sub>j</sub> * P<sub>s</sub> * L<sub>s</sub><sub>j</sub>) * {{form.structureLossess}} / 10000
					</span><br /><br />
					式中：<br />
					E<sub>f</sub> --表示建筑物结构经济损失；<br />
					S<sub>s</sub><sub>j</sub> --表示建筑物破坏情况明细，公里格网s类建筑物j破坏等级的面积；<br />
					P<sub>s</sub> --表示建筑物每平方米造价，公里格网s类建筑物的每平方米造价；<br />
					L<sub>s</sub><sub>j</sub> --表示建筑物损失比矩阵，s类建筑物在j破坏等级下的损失比；<br />
					{{form.structureLossess}} --表示评估调整参数。<br />
				</el-col>
			</el-row>
			<el-row style="margin: 20px 0;">
				<el-col :span="6" :offset="1">
					（2）建筑物室内财产经济损失
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="18" :offset="4">
					<span style="font-size: 16px;font-weight: bold;font-style: italic;"> E<sub>e</sub> = ∑<sub
							style="position: absolute;top: 20px;margin-left: -6px;">s</sub> ∑<sub
							style="position: absolute;top: 20px;margin-left: -6px;">j</sub>
						(S<sub>s</sub><sub>j</sub> * P<sub>e</sub> * L<sub>s</sub><sub>j</sub>) * {{form.indoorLossess}} / 10000
					</span><br /><br />
					式中：<br />
					E<sub>e</sub> --表示建筑物结构经济损失；<br />
					S<sub>s</sub><sub>j</sub> --表示建筑物破坏情况明细，公里格网s类建筑物j破坏等级的面积；<br />
					P<sub>e</sub> --表示建筑物室内财产；<br />
					L<sub>s</sub><sub>j</sub> --表示建筑物损失比矩阵，s类建筑物在j破坏等级下的损失比；<br />
					{{form.indoorLossess}} --表示评估调整参数。<br />
					<div style="margin-top:10px;line-height: 30px;">
						<table align="center" style="width: 100%;border-collapse: collapse;">
							<caption>建筑物损失比矩阵样例：</caption>
							<tr>
								<td id="lineTd">
									<span style="float:left;margin-top:20px;">结构类型</span>
									<span style="float:right;margin-top:0px;">破坏程度</span>
								</td>
								<td style="width: 100px;" align="center" valign="middle">基本完好</td>
								<td style="width: 100px;" align="center" valign="middle">轻微破坏</td>
								<td style="width: 100px;" align="center" valign="middle">中等破坏</td>
								<td style="width: 100px;" align="center" valign="middle">严重破坏</td>
								<td style="width: 100px;" align="center" valign="middle">毁坏</td>
							</tr>
							<tr>
							</tr>
							<tr>
								<td style="width: 150px;" align="center" valign="middle">高层建筑</td>
								<td align="center" valign="middle">{{form.highBasicIntact}}</td>
								<td align="center" valign="middle">{{form.highSlightDamage}}</td>
								<td align="center" valign="middle">{{form.highMidDamage}}</td>
								<td align="center" valign="middle">{{form.highBadDamage}}</td>
								<td align="center" valign="middle">{{form.highDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">钢结构</td>
								<td align="center" valign="middle">{{form.steelBasicIntact}}</td>
								<td align="center" valign="middle">{{form.steelSlightIntact}}</td>
								<td align="center" valign="middle">{{form.steelMidIntact}}</td>
								<td align="center" valign="middle">{{form.steelBadIntact}}</td>
								<td align="center" valign="middle">{{form.steelDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">多层钢筋混凝土结构</td>
								<td align="center" valign="middle">{{form.multipleBasicIntact}}</td>
								<td align="center" valign="middle">{{form.multipleSlightIntact}}</td>
								<td align="center" valign="middle">{{form.multipleMidIntact}}</td>
								<td align="center" valign="middle">{{form.multipleBadIntact}}</td>
								<td align="center" valign="middle">{{form.multipleDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">砖混结构</td>
								<td align="center" valign="middle">{{form.brickConcreteBasicIntact}}</td>
								<td align="center" valign="middle">{{form.brickConcreteSlightIntact}}</td>
								<td align="center" valign="middle">{{form.brickConcreteMidIntact}}</td>
								<td align="center" valign="middle">{{form.brickConcreteBadIntact}}</td>
								<td align="center" valign="middle">{{form.brickConcreteDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">砖木结构</td>
								<td align="center" valign="middle">{{form.brickWoodBasicIntact}}</td>
								<td align="center" valign="middle">{{form.brickWoodSlightIntact}}</td>
								<td align="center" valign="middle">{{form.brickWoodMidIntact}}</td>
								<td align="center" valign="middle">{{form.brickWoodBadIntact}}</td>
								<td align="center" valign="middle">{{form.brickWoodDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">土结构</td>
								<td align="center" valign="middle">{{form.soilBasicIntact}}</td>
								<td align="center" valign="middle">{{form.soilSlightIntact}}</td>
								<td align="center" valign="middle">{{form.soilMidIntact}}</td>
								<td align="center" valign="middle">{{form.soilBadIntact}}</td>
								<td align="center" valign="middle">{{form.soilDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">木结构</td>
								<td align="center" valign="middle">{{form.woodBasicIntact}}</td>
								<td align="center" valign="middle">{{form.woodSlightIntact}}</td>
								<td align="center" valign="middle">{{form.woodMidIntact}}</td>
								<td align="center" valign="middle">{{form.woodBadIntact}}</td>
								<td align="center" valign="middle">{{form.woodDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">石结构</td>
								<td align="center" valign="middle">{{form.stoneBasicIntact}}</td>
								<td align="center" valign="middle">{{form.stoneSlightIntact}}</td>
								<td align="center" valign="middle">{{form.stoneMidIntact}}</td>
								<td align="center" valign="middle">{{form.stoneBadIntact}}</td>
								<td align="center" valign="middle">{{form.stoneDestory}}</td>
							</tr>
							<tr>
								<td align="center" valign="middle">其他结构</td>
								<td align="center" valign="middle">{{form.otherBasicIntact}}</td>
								<td align="center" valign="middle">{{form.otherSlightIntact}}</td>
								<td align="center" valign="middle">{{form.otherMidIntact}}</td>
								<td align="center" valign="middle">{{form.otherBadIntact}}</td>
								<td align="center" valign="middle">{{form.otherDestory}}</td>
							</tr>
						</table>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin: 20px 0;">
				<el-col :span="6" :offset="1">
					（3）建筑物直接经济损失
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :offset="6">
					<span style="font-size: 16px;font-weight: bold;font-style: italic;">E<sub>b</sub> = E<sub>f</sub> +
						E<sub>e</sub></span><br /><br />
					E<sub>b</sub>为建筑物直接经济损失，E<sub>f</sub>为建筑物结构经济损失，E<sub>e</sub>为建筑物室内财产经济损失。<br />

				</el-col>
			</el-row>
			<el-row style="margin-top: 30px;">
				<el-col :span="6" class="tab-title">
					生命线经济损失评估
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :offset="6">
					<span style="font-size: 16px;font-weight: bold;font-style: italic;"> L<sub>s</sub> = <span
							style="position: absolute;top: -15px;">E<sub>b</sub></span>——<span style="position: absolute;top: 22px;top: 15px;margin-left: -25px;">{{form.lifeRatio1}}</span> * {{form.lifeRatio2}} </span><br /><br />
					L<sub>s</sub>为公里格网生命线经济损失，E<sub>b</sub>为公里格网建筑物直接经济损失，{{form.lifeRatio1}}为建筑物经济损失在总经济损失中所占百分比，{{form.lifeRatio2}}为生命线经济损失在总经济损失中所占百分比。<br />
				</el-col>
			</el-row>
			<el-row style="margin-top: 30px;">
				<el-col :span="6" class="tab-title">
					其他经济损失评估
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :offset="6">
					<span style="font-size: 16px;font-weight: bold;font-style: italic;"> O<sub>s</sub> = <span
							style="position: absolute;top: -15px;">E<sub>b</sub></span>——<span style="position: absolute;top: 22px;top: 15px;margin-left: -25px;">{{form.otherRatio1}}</span> * {{form.otherRatio2}}</span><br /><br />
					O<sub>s</sub>为公里格网生命线经济损失，E<sub>b</sub>为公里格网建筑物直接经济损失，{{form.otherRatio1}}为建筑物经济损失在总经济损失中所占百分比，{{form.otherRatio2}}为其他经济损失在总经济损失中所占百分比。<br />
				</el-col>
			</el-row>

			<el-row style="margin-top: 30px;">
				<el-col :span="6" class="tab-title">
					直接经济损失评估
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :offset="6">
					<span style="font-size: 16px;font-weight: bold;font-style: italic;">E = E<sub>b</sub> + L<sub>s</sub> +
						O<sub>s</sub></span><br /><br />
					E为直接经济损失，E<sub>b</sub>为建筑物直接经济损失，L<sub>s</sub>为公里格网生命线经济损失，O<sub>s</sub>为公里格网其他经济损失。<br />

				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="close">关闭</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup>
import { getEconomicModelById } from '@/api/earthquakeLossesEstimation/earthquakeSetting'

const props = defineProps({
	open: Boolean,
	id: {
		type: String,
		default: ''
	}
})
const emits = defineEmits(['update:open'])
const data = reactive({
	form: {
		modelName: '',
		isDefault: '',
		province: '',
		city: '',
		createUserName: '',
		orgName: ''
	}
})
const { form } = toRefs(data)
// 查询模型详情
const getModelDetail = () => {
	getEconomicModelById(props.id).then(res => {
		if (res.code == 200) {
			res.data && (form.value = res.data)
		}
	})
}

const initOpen = () => {
	getModelDetail()
}
const close = () => {
	emits('update:open', false)
}
</script>
<style scoped lang="scss">
.el-form {
	padding-top: 20px;
	.el-form-item {
		margin-bottom: 0;
	}
}

.tab-title {
	font-size: 16px;
	font-weight: bold;
	border-left: 4px solid var(--el-color-primary);
	font-family: PingFangSC-Medium;
	padding-left: 10px;
	margin-bottom: 20px;
}
#lineTd {
  background: #fff url() no-repeat 100% center;   
}
table td{
  border:1px solid #c6c6c6;
}
</style>